<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>库存查询APP</title>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="no-cache"/>
    <meta http-equiv="Expires" content="-1"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>


    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">

    <meta content="telephone=no" name="format-detection"/>
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <style type="text/css">
        [v-cloak] {
            display: none;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            outline: none;
        }

        body {
            font-size: .2rem
        }

        table {
            border-collapse: collapse;
            border-right: 1px solid #555555;
            border-bottom: 1px solid #555555;
            margin-left: 0px;
            margin-top: 0px;
            margin-bottom: -1px !important;
            margin-right: 0px;
        }

        td {
            border-top: 1px solid #555555;
            border-left: 1px solid #555555;
            color: #333;
            font-weight: normal;

        }

        td.td-value {
            text-align: center !important;
            height: .30rem;
            font-size: x-small;
        }

        .table {
            width: 100%
        }

        .table .td-title, .table .td-module {
            background-color: #d9e1f1;
            text-align: center;
            height: .25rem;
            font-size: x-small;
        }

        .table .td-module {
            font-weight: bold;
        }

        .table .td-value span, .table .td-value input[type="text"], .td-value {
            text-align: left !important;
            vertical-align: middle;
            word-wrap: break-word;
        }

        .red td {
            color: red !important;
        }

        .orange td {
            color: orange !important;
        }

        table tr:nth-child(2n-1) {
            background-color: #f2f2f2;
        }

        .title {
            margin-top: 10px;
            text-align: center;
            line-height: .2rem;
            font-size: 12px;
            font-weight: bold;
        }

        .reginTd {
            max-width: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            position: relative;
            cursor: pointer;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            background-color: #d3e8fd;
            padding: 8px 6px;
            font-size: x-small;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 13px;
            height: 10px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 35px;
            top: -10px;
        }
    </style>
</head>
<body>
<section v-cloak id="app" style="min-height: 100vh">

    <div class="div-td-content-more"><i></i></div>
    <!--:style="i!=0?'visibility:hidden':''"-->
    <!--<div class="box-header">-->
    <!--<template v-if="i==0">-->
    <!--<span @click="getNewDevice('全部')" class="pd_1" style="margin-left: 70px">全部(<strong-->
    <!--style="color: #2c8cec">{{num.all}}</strong>)</span>-->
    <!--<span @click="getNewDevice('提车在途')" class="pd_1">提车在途(<strong style="color: #2c8cec">{{num.getNow}}</strong>)</span>-->
    <!--<span @click="getNewDevice('库存')" class="pd_1">库存(<strong style="color: #2c8cec">{{num.no}}</strong>)</span>-->
    <!--<span @click="getNewDevice('交付在途')" class="pd_1">交付在途(<strong style="color: #2c8cec">{{num.outNow}}</strong>)</span>-->
    <!--<span @click="getNewDevice('已交')" class="pd_1">已交(<strong style="color: #2c8cec">{{num.out}}</strong>)</span>-->
    <!--<span @click="getNewDevice('移库在途')" class="pd_1">移库在途(<strong style="color: #2c8cec">{{num.moveNow}}</strong>)</span>-->
    <!--<span @click="getNewDevice('退货')" class="pd_1">退货(<strong style="color: #2c8cec">{{num.exit}}</strong>)</span>-->
    <!--</template>-->
    <!--<template v-else>-->
    <!--<div style="height: 0.4rem;"/>-->
    <!--</template>-->
    <!--</div>-->
    <div class="title" style="margin-top: 20px">新机库存</div>
    <table class="table text-center">
        <!--新机-->
        <!--<template v-if="i==0">-->
        <tr>
            <td class="td-title" style="width: 60px">归属公司</td>
            <td class="td-title" style="width: 60px">库存地</td>
            <td class="td-title" style="width: 60px">品牌</td>
            <td class="td-title" style="width: 60px">设备类型</td>
            <td class="td-title" style="width: 60px">型号</td>
            <td class="td-title" style="width: 60px">序列号</td>
            <td class="td-title" style="width: 60px">出厂年份</td>
            <td class="td-title" style="width: 60px">小时数</td>
            <td class="td-title">状态</td>
            <!--<td class="td-title">备注</td>-->
        </tr>
        <!--<tr v-for="(item,i) in list" :class="item.jobState<0?'red':''">-->
        <tr v-for="(item,i) in list">
            <td class="td-value reginTd">
                {{item.companyName}}
            </td>
            <td class="td-value reginTd">
                {{item.storeAddress}}
            </td>
            <td class="td-value">
                {{item.brandName}}
            </td>
            <td class="td-value reginTd">
                {{item.deviceTypeName}}
            </td>
            <td class="td-value reginTd">
                {{item.modelName}}
            </td>
            <td class="td-value reginTd">
                {{item.sequence}}
            </td>
            <td class="td-value">
            </td>
            <td class="td-value">
            </td>
            <td class="td-value">
                {{item.state}}
            </td>
            <!--<td class="td-value"/>-->
        </tr>
    </table>


    <div class="title">旧机库存</div>
    <table class="table text-center">
        <!--旧机置换-->
        <!--<template v-else-if="i==1">-->
        <tr>
            <td class="td-title" style="width: 60px">归属公司</td>
            <td class="td-title" style="width: 60px">库存地</td>
            <td class="td-title" style="width: 60px">品牌</td>
            <td class="td-title" style="width: 60px">设备类型</td>
            <td class="td-title" style="width: 60px">型号</td>
            <td class="td-title" style="width: 60px">序列号</td>
            <td class="td-title" style="width: 60px">出厂年份</td>
            <td class="td-title" style="width: 60px">小时数</td>
            <td class="td-title">状态</td>
            <!--<td class="td-title">备注</td>-->
        </tr>
        <!--<tr v-for="(item,i) in list" :class="item.jobState<0?'red':''">-->
        <tr v-for="(item,i) in list1">
            <td class="td-value reginTd">
                {{item.companyName}}
            </td>
            <td class="td-value reginTd">
                {{item.storeAddress}}
            </td>
            <td class="td-value reginTd">
                {{item.brandName}}
            </td>
            <td class="td-value reginTd">
                {{item.replacementType}}
            </td>
            <td class="td-value reginTd">
                {{item.modelName}}
            </td>
            <td class="td-value reginTd">
                {{item.sequence}}
            </td>
            <td class="td-value reginTd">
                {{item.factoryDate}}
            </td>
            <td class="td-value">
                {{item.hours}}
            </td>
            <td class="td-value">
                --
            </td>
            <!--<td class="td-value"/>-->
        </tr>
    </table>
    <!--</template>-->

    <div class="title">旧汽车库存</div>
    <table class="table text-center">
        <!--旧汽车-->
        <!--<template v-else-if="i==2">-->
        <tr>
            <td class="td-title" style="width: 60px">归属公司</td>
            <td class="td-title" style="width: 60px">库存地</td>
            <td class="td-title" style="width: 60px">品牌</td>
            <td class="td-title" style="width: 60px">汽车类型</td>
            <td class="td-title" style="width: 60px">型号</td>
            <td class="td-title" style="width: 60px">出厂年份</td>
            <td class="td-title" style="width: 60px">公里数</td>
            <td class="td-title" >状态</td>
            <!--<td class="td-title">备注</td>-->
        </tr>
        <tr v-for="(item,i) in list2">
            <td class="td-value reginTd">
                {{item.companyName}}
            </td>
            <td class="td-value reginTd">
                {{item.storeAddress}}
            </td>
            <td class="td-value reginTd">
                {{item.brandName}}
            </td>
            <td class="td-value reginTd">
                {{item.replacementType}}
            </td>
            <td class="td-value reginTd">
                {{item.modelName}}
            </td>
            <td class="td-value reginTd">
                {{item.factoryDate}}
            </td>
            <td class="td-value reginTd">
                {{item.kilometers}}
            </td>
            <td class="td-value">
                --
            </td>
            <!--<td class="td-value"></td>-->
        </tr>
    </table>
    <!--</template>-->

    <div class="title">旧商品房库存</div>
    <table class="table text-center">
        <!--旧房屋-->
        <!--<template v-else-if="i==3">-->
        <tr>
            <td class="td-title" style="width: 60px">归属公司</td>
            <td class="td-title" style="width: 60px">所在地</td>
            <td class="td-title" style="width: 60px">房屋名称</td>
            <td class="td-title" style="width: 60px">房屋类型</td>
            <td class="td-title" style="width: 60px">房屋位置</td>
            <td class="td-title" style="width: 60px">楼号/单元</td>
            <td class="td-title" style="width: 60px">面积(m²)</td>
            <td class="td-title" >状态</td>
            <!--<td class="td-title">备注</td>-->
        </tr>
        <tr v-for="(item,i) in list3">
            <td class="td-value reginTd">
                {{item.companyName}}
            </td>
            <td class="td-value reginTd">
                {{item.region}}
            </td>
            <td class="td-value reginTd">
                {{item.houseName}}
            </td>
            <td class="td-value reginTd">
                {{item.replacementType}}
            </td>
            <td class="td-value reginTd">
                {{item.houseAddress}}
            </td>
            <td class="td-value reginTd">
                {{item.buildingNumber}}
            </td>
            <td class="td-value reginTd">
                {{item.area}}
            </td>
            <td class="td-value reginTd">
                {{item.state}}
            </td>
            <!--<td class="td-value reginTd"></td>-->
        </tr>

        <!--</template>-->
    </table>
</section>


<!--rem.js-->
<script src="/dist/js/pages/rem/rem.js"></script>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="/dist/js/oaApp.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("body").on("click", ".reginTd", function (e) {
            var text = $(this).text();
            if (text != "") {
                text = "<i></i>" + text;
                $(".div-td-content-more").html(text).css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            i: 0,
            userId: getUrlParamObj().userId,
            key: '',
            list: [],
            list1: [],
            list2: [],
            list3: [],
            num: {}
        },
        methods: {
            getNewDevice: function (state) {
                var that = this;
                that.key = '';
                var data = {}
                if (state != '全部') {
                    data = {
                        'state': state,
                        'key': "",
                    };
                }

                $.ajax({
                    url: server.ip + '/deviceSample/getDeviceSampleList.json',
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
                        var res = JSON.parse(r);
                        if (that.i == 0) {
//                            that.num = res.data.sendData.num
                            that.list = res.data.sendData.records;
                            if (that.list.length == 0) {

                            }
                            that.i = 1
                            that.getOldDevice();
                        }
                        console.log(res);
                    },
                    error: function (e) {
                        alert(e.responseText)
                    }
                });
            },
            getOldDevice: function () {
                var that = this;
                that.key = '';
                var data = {
                    'brandName': "",
                    'companyName': "",
                    'key': "",
                    'modelName': "",
                    'replacementType': "",
                    'sequence': "",
                    'state': "",
                    'type': that.i,
                };
                $.ajax({
                    url: server.ip + '/deviceDisplace/getDisplaceList.json',
                    contentType: 'application/json;charset=utf-8',
                    type: "POST",
                    data: JSON.stringify(data),
                    success: function (r) {
                        var res = JSON.parse(r);
                        if (that.i == 1) {
                            that.list1 = res.data.sendData.records;
                            that.i = 2
                            that.getOldDevice();
                        } else if (that.i == 2) {
                            that.list2 = res.data.sendData.records;
                            that.i = 3
                            that.getOldDevice();
                        } else if (that.i == 3) {
                            that.list3 = res.data.sendData.records;
                        }

                        console.log(res);
                    },
                    error: function (e) {
                        alert(e.responseText)
                    }
                });
            },

        },
        mounted: function () {
            this.getNewDevice('全部');
        }
    });
</script>
</body>
</html>